<template>
  <div class="detail-top">
      <div class="img-container" ref="imgContainer">
          <img :src="path" alt="" class="bigImg" :class="{'active':avatarUrl}">
          <div class="containerMb" v-show="avatarUrl"></div>
          <div class="litContainer" :class="{'active':avatarUrl}" >
              <img :src="path" alt="" class="litImg" v-show="avatarUrl">
              <span class="litContainerTitle" :class="{'active':avatarUrl}">{{playlist.name}}</span>
              <span class="litContainerDetails" >{{description}}</span>
              <div class="creator" v-show="avatarUrl">
                <img :src="avatarUrl" alt="">
                <p >{{nickname}}</p>
              </div>
              <p class="nickname" v-show="!avatarUrl">{{nickname}}</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'DetailTop',
  props: {
    path: {
      type: String,
      default: '',
      required: true
    },
    playlist: {
      type: Object,
      default: () => {},
      required: true
    },
    album: {
      type: Object,
      default: () => {},
      required: true
    },
    artist: {
      type: Object,
      default: () => {},
      required: true
    },
    rank: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  data () {
    return {
      avatarUrl: '',
      nickname: '',
      description: ''
    }
  },
  mounted () {
    this.$bus.$on('detailImg', (value) => {
      this.commentsImg()
    })
  },
  methods: {
    commentsImg () {
      this.$bus.$emit('commentsImg', this.path, this.playlist.name, this.nickname)
    }

  },
  updated () {
    if (this.playlist.creator) {
      this.avatarUrl = this.playlist.creator.avatarUrl
      this.nickname = this.playlist.creator.nickname
      this.description = this.playlist.description
    } else if (this.album.description) {
      this.nickname = this.album.company
      this.description = this.album.description
    } else if (this.artist.briefDesc) {
      this.nickname = this.artist.alias[0]
      this.description = this.artist.briefDesc
    } else {
      this.description = this.rank.description
    }
  }
}
</script>

<style scoped lang='scss'>
@import "../../assets/css/mixin";
@import "../../assets/css/variable";
.detail-top{
    width: 100%;
    height: 700px;
    position: absolute;
    overflow: hidden;
    top: 100px;
    .img-container{
      width: 6000px;
      height: 6000px;
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: -5440px;
      transform: translateX(-50%);
      left: 50%;
    }
    .containerMb{
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #ccc;
      opacity: 0.5;
    }
     .litContainer{
        width: 350px;
        height: 350px;
        position: absolute;
        left: 47%;
        transform: translateX(-50%);
        bottom: 3%;
        background-color: transparent;
        border-radius: 30px;
        &.active{
          background-color: white;
        }
        .nickname{
          font-size: 50px;
          color: white;
          position: absolute;
          width: 710px;
          text-align: center;
          opacity: .9;
          top: 240px;
        }
        .litContainerDetails{
          position: absolute;
          width: 700px;
          font-size: 30px;
          // height: 118px;
          bottom: -128px;
          overflow: hidden;
          color: white;
          opacity: 0.8;
          @include clamp(4);
        }
        .litContainerTitle{
          position: absolute;
          color: white;
          left: 0px;
          top: 100px;
          width: 710px;
          font-size: 80px;
          opacity: 0.9;
          text-align: center;
          @include clamp(1);
          &.active{
          font-size: 40px;
          width: 350px;
          left: 375px;
          top: 20px;
          }
        }
        .creator{
          position: absolute;
          width: 350px;
          height: 100px;
          left: 370px;
          top: 200px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            filter: blur(0px);
            // position: relative;
          }
          p{
            width: 250px;
            @include clamp(1);
            line-height: 100px;
            font-size: 26px;
            color: white;
            opacity: 0.8;
          }
        }
        .litImg{
          position: absolute;
          filter: blur(0px);
          width: 100%;
          height: 100%;
          border-radius: 30px;
        }
      }
    .bigImg{
        width: 12.5%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        &.active{
          filter: blur(20px);
        }
    }
}
</style>
